<template>
    <div class="content">
        <el-dialog :visible.sync="dialog.dialogFormVisible" title="科目详情" size="tiny" :before-close="close" :span='22'>
            <el-form label-width="120px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
                <el-form-item label="科目添加" prop="subject">
                    <subject v-model="ruleForm.subjectName" style="width:100%" @change='subjectChange'></subject>  
                </el-form-item>

                <el-form-item label="已有科目" prop="haveSubject">
                    <div class="subjectKuang">
                    <el-tag :key="tag.name" v-for="tag in dynamicTags" closable :disable-transitions="false"  @close="handleClose(tag)">{{tag.subjectName}}</el-tag>
                    </div>
                </el-form-item>
            </el-form> 
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm" :loading="loadingBtn">确认</el-button>
            </div> 
        </el-dialog>
    </div>
</template>
<script>
import { listSchoolSubject, updateSchoolSubject } from 'api/schoolManage';
import subject from 'components/SchoolClasss/subject';
export default {
    components: {subject},
    props: {
        dialog: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            dynamicTags: [],
            ruleForm: {
                subjectName: '',
                subjectId: ''
            },
            loadingBtn: false,
            schoolLoadingSub: false,
            rules: {}
        }
    },
    // 初始化
    created() {
        this.getSubjectDetail();
    },
    methods: {
        close() {
            this.dialog.dialogFormVisible = false
        },
        subjectChange(val) {
            this.ruleForm.subjectId = val;
            for (let i=0;i<this.dynamicTags.length;i++) {
                if (this.ruleForm.subjectName==this.dynamicTags[i].subjectName) {
                    this.$message({
                        type: 'warning',
                        message: '添加科目重复'
                    });
                    this.ruleForm.subjectId = '';
                    this.ruleForm.subjectName = '';
                    return;
                }
            }
            if (val != '') {
                let tag = {
                    subjectName: this.ruleForm.subjectName,
                    subjectId: val
                }
                this.dynamicTags.push(tag)
                this.ruleForm.subjectId = '';
                this.ruleForm.subjectName = '';
            }
        },
        // 标签删除
        handleClose(tag) {
            this.ruleForm.subject = '';
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        // 查询科目详情
        getSubjectDetail() {
            listSchoolSubject(this.dialog.pid).then(response => {
                if (response.data.status==200) {
                    this.dynamicTags = response.data.content;    
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
        submitForm() {

            let str = '';
            for (var i = 0;i<this.dynamicTags.length;i++) {
                str+=this.dynamicTags[i].subjectId+',';
            }
            str = str.substring(0, str.length-1);
            this.loadingBtn = true;
            updateSchoolSubject(this.dialog.pid, str).then(response => {
                this.loadingBtn = false;
                this.$message({
                    type: 'success',
                    message: response.data.errorMsg
                });
            }).catch(() => {
                this.loadingBtn = false;
            });
            this.dialog.dialogFormVisible = false;

            // 给父组件传值
            this.$emit('teacherName', this.value)
        },
        resetForm() {
            this.dialog.dialogFormVisible = false;
        }
    }
}
</script>
<style lang="scss" scoped>
.el-form{
    padding-right:30px;
}
.subjectKuang{
    padding:5px 10px 20px 5px;
    width:100%;
}
.dialog-footer{
    text-align:center;
}
.el-tag{
    margin-left:5px;
    background:#f9f9f9;
    color:#444;
}
</style>
